<template>
	<div class="content">
		<div class="content-top">
			电池管理_电池详情
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
		</div>
		<div class="car-detail">
			<el-row>
				<el-col :span="8">电池编码：{{detail.code}}</el-col>
				<el-col :span="8">电池型号：{{detail.model}}</el-col>
                <el-col :span="8">电池类型：{{detail.type}}</el-col>
			</el-row>
            <el-row v-if="detail.currentPosition == 1">
				<el-col :span="8">电池位置：{{textConversion(detail.currentPosition)}}</el-col>
				<el-col :span="8">所在换电站：{{detail.stationName}}</el-col>
                <el-col :span="8">电池仓编码：{{detail.batteryCabinCode}}</el-col>
			</el-row>
            <el-row v-if="detail.currentPosition == 2">
				<el-col :span="8">电池位置：{{textConversion(detail.currentPosition)}}</el-col>
				<el-col :span="8">所在车辆车牌号：{{detail.licensePlateNumber	}}</el-col>
                <el-col :span="8">所在车车架号：{{detail.vin}}</el-col>
			</el-row>
			<el-row v-if="detail.currentPosition == 0">
				<el-col :span="8">电池位置：{{textConversion(detail.currentPosition)}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">状态：{{detail.status == null ? '未知' : detail.status}}</el-col>
				<el-col :span="8">充电次数：{{detail.numberOfCharge == null ? '未知' : detail.numberOfCharge + '次'}}</el-col>
                <el-col :span="8">电池包累计行驶里程：{{detail.cumulativeMileage == null ? '未知' : detail.cumulativeMileage + 'km'}}</el-col>
			</el-row>
		</div>
        <div class="car-title">
			<div class="car-title-left">出入库记录</div>
		</div>
		<div class="car-table-page">
        <div class="car-detail-table">
			<el-table :data="recordList" show-header stripe style="width: 100%;">
				<el-table-column align="center" label="电池编号">
					<template slot-scope="scope">{{scope.row.batteryCode}}</template>
				</el-table-column>
				<el-table-column align="center" label="操作步骤">
					<template slot-scope="scope">{{scope.row.operateType_dictText}}</template>
				</el-table-column>
				<el-table-column align="center" width="160" label="操作时间">
					<template slot-scope="scope">{{scope.row.createDate}}</template>
				</el-table-column>
				<el-table-column align="center" label="剩余电量">
					<template slot-scope="scope">{{scope.row.soc == null ? 0 : scope.row.soc}}</template>
				</el-table-column>
				<el-table-column align="center" label="所在位置">
					<template slot-scope="scope">{{scope.row.destinationPosition_dictText == null ? '未知' : scope.row.destinationPosition_dictText}}</template>
				</el-table-column>
				<el-table-column align="center" label="换电站名称">
					<template slot-scope="scope">{{scope.row.stationName == null ? '未知' : scope.row.stationName}}</template>
				</el-table-column>
				<el-table-column align="center" label="货架位置">
					<template slot-scope="scope">{{scope.row.batteryCabinCode == null ? '未知' : scope.row.batteryCabinCode}}</template>
				</el-table-column>
				<el-table-column align="center" label="车牌号">
					<template slot-scope="scope">{{scope.row.licensePlateNumber == null ? '未知' : scope.row.licensePlateNumber}}</template>
				</el-table-column>
				<el-table-column align="center" label="车架号">
					<template slot-scope="scope">{{scope.row.vin == null ? '未知' : scope.row.vin }}</template>
				</el-table-column>
			</el-table>
		</div>
            <div class="content-page">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
				:page-size=limit layout="prev, pager, next, jumper" :total=total>
				</el-pagination>
			</div>
		</div>
		
		
		
        <div class="car-title center-button">
			<center>
				<!-- <el-button type="primary">申请报废</el-button> -->
				<el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
				<!-- <el-button type="primary">充电记录</el-button> -->
			</center>
		</div>
        <!-- <div class="car-detail application-reason">
			<label for="">申请原因： </label>
			<el-input v-model="reason" :rows="8" style="width:88%" type="textarea" placeholder="请输入原因"></el-input>
		</div>
		<div class="car-title center-button">
			<center>
				<el-button type="primary">提交</el-button>
				<el-button type="primary">取消</el-button>
			</center>
		</div> -->
		
	</div>
</template>

<script>
	export default{
		props:['id'],
		components:{
		
		},
		data(){
			return{
			   reason:'',
			   detail:'',
			   batteryPosition:[
				   {
					   id:0,
					   name:'仓库'
				   },
				   {
					   id:1,
					   name:'换电站'
				   },
				   {
					   id:2,
					   name:'车上'
				   }
			   ],
			   page:1,
			   limit:5,
			   recordList:[],
			   total: 1,

			}
			
		},
		created() {
		},
		mounted() {
			this.get_detail()
			this.get_warehouse_record()
		},
		methods:{
			textConversion(idx){
				for(let item of this.batteryPosition){
					if(item.id == idx){
                      return item.name
					}
				}
			},
			/* 获取详情 */
			get_detail(){
				var self = this
                this.$axios.get(this.$global.serverIp + 'station/battery/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
						
							self.detail = res.data
						}
				
					})
			},
			/* 返回 */
			onBack(){
				this.$emit('isDetail')
			},
			/* 获取出入库记录 */
			get_warehouse_record (){
				var self = this
                this.$axios.post(this.$global.serverIp + 'station/batteryOperateRecord/findPage',{
					"batteryId":self.id,
					"limit":self.limit,
					"page":self.page
				})
                .then(res =>{
					self.recordList = res.data.list
					self.total = res.data.totalCount;
                })
			},
			handleSizeChange(val) {
			
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_warehouse_record();
			},
		}
	}
</script>

<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		height: 300px;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	.car-table-page{
		width: 1088px;
		height: 300px;
	}
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.application-reason{
		display: flex;
		align-items: flex-start;
	}
	.center-button{
		padding-bottom: 30px;
	}
</style>

